<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<title>panel - 组件容器</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no,email=no" />
<link rel="apple-touch-icon" href="../../yo.png" />
<link rel="shortcut icon" href="../../shortcut.png" />
<link rel="stylesheet" href="../../usage/export/yo-all.css" />
</head>
<body>

<div class="m-demo">
    <div class="device">
    <div class="stage">
        <div class="yo-header">索引列表</div>
        <div class="yo-panel">
            <div class="sticky">A</div>
            <div class="scroll-wrap">
                <ul class="yo-list">
                    <li class="label">A</li>
                    <li class="item">list item</li>
                    <li class="item">list item</li>
                    <li class="item">list item</li>
                    <li class="label">B</li>
                    <li class="item">list item</li>
                    <li class="item">list item</li>
                    <li class="item">list item</li>
                    <li class="label">C</li>
                    <li class="item">list item</li>
                    <li class="item">list item</li>
                    <li class="item">list item</li>
                    <li class="item">list item</li>
                </ul>
            </div>
            <div class="scroll-wrap scroll-index">
                <ul class="yo-index">
                    <li><i class="yo-ico">&#xf04a;</i></li>
                    <li>历史</li>
                    <li>热门</li>
                    <li>A</li>
                    <li>b</li>
                    <li>c</li>
                    <li>d</li>
                    <li><span class="ellipsis"></span></li>
                    <li>g</li>
                    <li>h</li>
                    <li>i</li>
                    <li>j</li>
                    <li>k</li>
                    <li>l</li>
                    <li><span class="ellipsis"></span></li>
                    <li>o</li>
                    <li>p</li>
                    <li>q</li>
                    <li>r</li>
                    <li>s</li>
                    <li>t</li>
                    <li>u</li>
                    <li>v</li>
                    <li>w</li>
                    <li>x</li>
                    <li>y</li>
                    <li>z</li>
                </ul>
            </div>
        </div>
    </div>
    </div>
    <code class="code"><xmp><div class="yo-panel">
    <div class="sticky">A</div>
    <div class="scroll-wrap">
        <ul class="yo-list">
            <li class="label">A</li>
            <li class="item">list item</li>
            <li class="item">list item</li>
            <li class="item">list item</li>
            <li class="label">B</li>
            <li class="item">list item</li>
            <li class="item">list item</li>
            <li class="item">list item</li>
            <li class="label">C</li>
            <li class="item">list item</li>
            <li class="item">list item</li>
        </ul>
    </div>
    <div class="scroll-wrap scroll-index">
        <ul class="yo-index">
            <li><i class="yo-ico">&#xf04a;</i></li>
            <li>历史</li>
            <li>热门</li>
            <li>A</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
            <li><span class="ellipsis"></span></li>
            <li>g</li>
            <li>h</li>
            <li>i</li>
            <li>j</li>
            <li>k</li>
            <li>l</li>
            <li><span class="ellipsis"></span></li>
            <li>o</li>
            <li>p</li>
            <li>q</li>
            <li>r</li>
            <li>s</li>
            <li>t</li>
            <li>u</li>
            <li>v</li>
            <li>w</li>
            <li>x</li>
            <li>y</li>
            <li>z</li>
        </ul>
    </div>
</div></xmp></code>
</div>

<div class="m-demo">
    <div class="device">
    <div class="stage">
        <div class="yo-header">索引列表</div>
        <div class="yo-panel">
            <div class="scroll-wrap">
                <div class="no-data">无数据</div>
            </div>
        </div>
    </div>
    </div>
    <code class="code"><xmp><div class="yo-panel">
    <div class="scroll-wrap">
        <ul class="yo-list">

        </ul>
        <div class="no-data">无数据</div>
    </div>
</div></xmp></code>
</div>

<pre class="m-code"><span class="method">@include yo-panel</span><span class="bracket">(</span>
    $name<span class="colon">:</span>default, <mark>//{String} panel名称</mark>
    $top<span class="colon">:</span>default <mark>//{Length} panel顶部偏移值</mark>
<span class="bracket">)</span>
</pre>

</body>
</html>